.blog-slider.swiper-container-fade.swiper-container-horizontal#swiper_container
  .blog-slider__wrp.swiper-wrapper(style='transition-duration: 0ms;')
    .blog-slider__item.swiper-slide(style='width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;')
      .blog-slider__img
        img(src='https://zfe.space/images/letter/m.png', alt='https://zfe.space/images/letter/m.png')
      .blog-slider__content
        span.blog-slider__code 2020-11-05
        a.blog-slider__title(href='https://zfe.space/2020/11/05/2020-11-05/') 教程：基于Butterfly主题的新闻资讯侧边栏
        .blog-slider__text 这个插件基于RollToolsApi,在使用前请先在微信搜索小程序“Roll地盘”获取api.id和api.key。
        a.blog-slider__button(href='https://zfe.space/2020/11/05/2020-11-05/') 详情
    .blog-slider__item.swiper-slide(style='width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;')
      .blog-slider__img
        img(src='https://zfe.space/images/letter/g.png', alt='https://zfe.space/images/letter/g.png')
      .blog-slider__content
        span.blog-slider__code 2020-10-31
        a.blog-slider__title(href='https://zfe.space/2020/10/28/2020-10-31/') 教程：基于Butterfly主题的gitcalendar2.0
        .blog-slider__text 因为用之前的gitcalendar服务器失效了，于是找api自己手写了一个。项目用到了GitHub Contribution Calendar API。通过vuejs进行编码。
        a.blog-slider__button(href='https://zfe.space/2020/10/28/2020-10-31/') 详情
    .blog-slider__item.swiper-slide(style='width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;')
      .blog-slider__img
        img(src='https://zfe.space/images/letter/d.png', alt='https://zfe.space/images/letter/d.png')
      .blog-slider__content
        span.blog-slider__code 2020-10-26
        a.blog-slider__title(href='https://zfe.space/2020/10/30/2020-10-26/') 教程：基于Butterfly主题的双栏卡片主页文章css样式
        .blog-slider__text 首先你需要确保文章的图片位置为左侧布局。打开主题配置文件，搜索封面顯示的位置。
        a.blog-slider__button(href='https://zfe.space/2020/10/30/2020-10-26/') 详情
    .blog-slider__item.swiper-slide(style='width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;')
      .blog-slider__img
        img(src='https://zfe.space/images/letter/c.png', alt='https://zfe.space/images/letter/c.png')
      .blog-slider__content
        span.blog-slider__code 2020-10-18
        a.blog-slider__title(href='https://zfe.space/2020/10/18/2020-10-18/') 教程：基于Butterfly主题的分类磁贴2.0版
        .blog-slider__text 灵感来源于原生主题的gallery以及在其他主题见到过的分类列表。考虑到部分小伙伴的tag比较多，因此用categories为标准进行分类。
        a.blog-slider__button(href='https://zfe.space/2020/10/18/2020-10-18/') 详情
    .blog-slider__item.swiper-slide(style='width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;')
      .blog-slider__img
        img(src='https://zfe.space/images/letter/t.png', alt='https://zfe.space/images/letter/t.png')
      .blog-slider__content
        span.blog-slider__code 2020-10-16
        a.blog-slider__title(href='https://zfe.space/2020/10/16/2020-10-16-1/') 教程：基于Butterfly主题的模拟电子钟侧边栏小部件3.0版
        .blog-slider__text 相比1.0版本，加快了访问速度并优化了加载效果。相比2.0版本，通过vue替换jquery的dom操作提升了性能。解决了date class 会导致相关文章的时间样式出错的BUG。
        a.blog-slider__button(href='https://zfe.space/2020/10/16/2020-10-16-1/') 详情
    .blog-slider__item.swiper-slide(style='width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;')
      .blog-slider__img
        img(src='https://zfe.space/images/letter/h.png', alt='https://zfe.space/images/letter/h.png')
      .blog-slider__content
        span.blog-slider__code 2020-08-25
        a.blog-slider__title(href='https://zfe.space/2020/08/25/2020-08-25-1/') 教程：基于Butterfly主题的历史上的今天侧边栏小部件
        .blog-slider__text 做这个的目的是想学习一下ajax的跨域访问API，但实际上却很难弄。于是最终采用本地读取json的方法，制作了这个小部件。
        a.blog-slider__button(href='https://zfe.space/2020/08/25/2020-08-25-1/') 详情
  .blog-slider__pagination.swiper-pagination-clickable.swiper-pagination-bullets